<template>
    <am-list :header="title">
        <am-picker
            :title="placeholder"
            :data="type == 'city' ? provinceCity:type == 'province' ? province:cityArea"
            v-model="val"
            @ok="onOK"
        >
            <am-list-item
                slot-scope="{ extra, show }"
                :title="label ? label:type == 'city' ? '城市':type == 'province' ? '省份':'省市区'"
                :extra="extra"
                @click="show"
            ></am-list-item>
        </am-picker>
    </am-list>
</template>

<style scoped>
</style>

<script>
    import { AmList, AmListItem, AmPicker } from '../../weex-amui'
    import { province, provinceCity, cityArea } from './data.js'
    import AmButton from "../../weex-amui/packages/am-button/index"
    export default {
        name: 'yx-province',
        components: {AmButton, AmList, AmListItem, AmPicker },
        computed: {},
        model: {
            prop: 'value',
            event: 'ok'
        },
        props:{
            value: {
                type: Array,
                default: null
            },
            type: {
                type: String,
                default: 'city'
            },
            label: {
                type: String,
                default: ''
            },
            title: {
                type: String,
                default: ''
            },
            placeholder: {
                type: String,
                default :'请选择'
            }
        },
        data () {
            return {
                province,
                cityArea,
                provinceCity,
                val: [],
                pickerShow: false,
                isTargetEvent:false
            }
        },
        mounted (){
            this.val = this.value
        },
        methods: {
            onOK (value, label) {
                this.isTargetEvent = true
                console.log('ok', value, label)
                this.$emit('ok', this.val)
            }
        },
        watch: {
            value (val){
                if (this.isTargetEvent) {
                    this.value = this.val
                }else{
                    this.val = val
                }
                this.isTargetEvent = false;
            }
        }
    }
</script>
